/* eslint-disable quotes */
<template>
  <div id="app">
    <input v-model="message"/>
    <input :value="message" @input="handleChange"/>
    {{message}} {{message+message}}
    <div :id="message"></div>
    <input type="checkbox" v-model="check">ABC
    {{check}}

   <todo-list>
      <todo-item @delete="handleDelete" @show="showVal" v-for="item in list" :key="item.title" :title="item.title" :del="item.del">
        <template v-slot:pre-icon="{value}">
          <a>前置图标{{value}}</a>
        </template>
      </todo-item>
    </todo-list>
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue'
import TodoItem from './components/TodoItem.vue'
export default {
  name: 'app',
  components: {
    TodoList,
    TodoItem
  },
  data () {
    return {
      message: 'hello world',
      list: [
        {
          title: 'lq',
          del: true
        },
        {
          title: 'zw',
          del: false
        }
      ]
    }
  },
  methods: {
    handleDelete (val) {
      console.log('handleDelete', val)
    },
    showVal (val) {
      console.log('showVal', val)
    },
    handleChange (e) {
      this.message = e.target.value
    }
  }
}
</script>
